<template>

    <div class="app-container">
        <div>
            <!-- <el-switch v-model="isColumnHidden" @change="toggleColumnVisibility"></el-switch> -->
            <el-checkbox v-model="isColumnVisible">显示本年累计</el-checkbox>
            <el-checkbox v-model="Monthly">按月示例</el-checkbox>
        </div>
        <el-table stripe v-loading="loading" :data="subjectBalanceList" show-summary :summary-method="getSummaries">
            <el-table-column label="会计年度" align="center" prop="accountingYear" v-if="Monthly"></el-table-column>
            <el-table-column label="会计期间" align="center" prop="accountingPeriod" v-if="Monthly"></el-table-column>
            <el-table-column label="科目编码" align="center" prop="subjectCode"></el-table-column>
            <el-table-column label="科目名称" align="center" prop="subjectName"></el-table-column>
            <el-table-column label="期初余额">
                <el-table-column label="期初借方余额" align="center" prop="initialDebit"></el-table-column>
                <el-table-column label="期初贷方余额" align="center" prop="initialCredit"></el-table-column>
            </el-table-column>
            <el-table-column label="本期发生额">
                <el-table-column label="本期借方发生额" align="center" prop="currentDebit"></el-table-column>
                <el-table-column label="本期贷方发生额" align="center" prop="currentCredit"></el-table-column>
            </el-table-column>

            <el-table-column label="本年累计发生额" v-if="isColumnVisible">
                <el-table-column label="本年累计借方发生额" align="center" prop="yearToDateDebit"></el-table-column>
                <el-table-column label="本年累计贷方发生额" align="center" prop="yearToDateCredit"></el-table-column>
            </el-table-column>

            <el-table-column label="期末余额">
                <el-table-column label="期末借方余额" align="center" prop="endingDebit"></el-table-column>
                <el-table-column label="期末贷方余额" align="center" prop="endingCredit"></el-table-column>
            </el-table-column>

        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { selectSubjectBalance } from "@/api/caiwu/subjectBalance";

const subjectBalanceList = ref([]);
const loading = ref(true);

// 控制指定列是否显示的状态
const isColumnVisible = ref(false);
const Monthly = ref(false);

/** 查询凭证管理列表 */
function getList() {
    selectSubjectBalance()
        .then(response => {
            subjectBalanceList.value = response.data;
            loading.value = false;
        })
        .catch(error => {
            console.error('接口调用失败:', error);
        });
}

// 自定义汇总方法
const getSummaries = ({ columns, data }) => {
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '汇总';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(isNaN) && ['initialDebit', 'initialCredit', 'currentDebit', 'currentCredit', 'yearToDateDebit', 'yearToDateCredit', 'endingDebit', 'endingCredit'].includes(column.property)) {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
        } else {
            sums[index] = '';
        }
    });
    return sums;
};

getList();
</script>